<template>
    <view class="w100 pt-30 border">
        <view class="pl-30 ft-30 line-height1 t-w">近期招募学员</view>
        <swiper
            class="swiper"
            :display-multiple-items="2.5"
            :circular="true"
            :autoplay="true"
            :interval="4000"
            :duration="800"
        >
            <swiper-item v-for="item in 10" :key="item">
                <view class="swiper-list h100">
                    <view class="column h100 swiper-list-item br-20">
                        <view class="align-center">
                            <view class="br-28 over-hide">
                                <hj-image
                                    mode="aspectFill"
                                    img="https://cdn.uviewui.com/uview/album/1.jpg"
                                    width="56rpx"
                                    height="56rpx"
                                />
                            </view>
                            <view class="ml-16 ft-30 t-3 text-over-1 flex-auto">
                                张伟{{ item }}
                            </view>
                        </view>
                        <view class="ft-26 mt-14 t-6 line-height1 text-over-1">
                            三类视距内驾驶员
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup>
/**
 * @description 最近招收学员展示区域组件
 * @author yinzhi
 * @date 2025-03-14
 */
import { defineComponent } from 'vue'
defineComponent({
    name: 'StudentDisplay'
})
</script>

<style scoped lang="scss">
.border {
    border-top: 2rpx solid #eee;
}
.swiper {
    height: 200rpx;
    &-list {
        padding: 30rpx 0rpx 30rpx 30rpx;
        &-item {
            background: #fff;
            border: 1px solid #ccc;
            padding: 20rpx 20rpx;
        }
    }
}
</style>
